<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动画</title>
		<style>
			.box{
				width:300px;
				height:500px;
				border:4px solid green;
				/* step2:绑定动画 */
				animation:sf 2s;
			}
			/* step1:创建关键帧 */
			@keyframes sf{
				from{/* 开始帧 */
					width:300px;
					height:300px;
					background-color:blue;
					transform:rotate(0deg);
				}
				to{/* 结束帧 */
					width:1200px;
					height:500px;
					background-color:pink;
					transform:translate(200px,300px) rotate(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
